<template>
  <div class="monthdateBox">
    <div class="info flexwrap">
      <p>排版日期</p>
      <ul class="flexwrap">
        <li class="flexwrap">
          <p class="bar"></p>
          <p>上班日期</p>
        </li>
        <li class="flexwrap">
          <p class="bar bargray"></p>
          <p>上班日期</p>
        </li>
      </ul>
    </div>
    <div class="flexwrap swichselect">
      <p class="selectInfo">选中状态</p>
      <div>
        <el-radio v-model="radio" label="1">选中</el-radio>
        <el-radio v-model="radio" label="2">未选中</el-radio>
      </div>
    </div>

    <div class="dateBox">
      <div class="flexwrap datebtn">
        <button class="premonth el-icon-arrow-left" @click="preMonth"></button>
        <button class="showmonth">{{showdateBtn}}</button>
        <button class="nextmonth el-icon-arrow-right" @click="nextMonth"></button>
      </div>
      <ul class="flexwrap week">
        <li v-for="witem in week" :key="witem">{{witem}}</li>
      </ul>
      <ul class="week flexwrap" v-for="(newtitem,i) in newtab" :key="i">
          <li  v-for="(item,s) in newtitem " :key="s" :class="item.selected" @click="ifselected(i,s)">{{item.date}}</li>
      </ul>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.monthdateBox {
  width: 100%;
  background: #fff;
  padding: 20px 0;
  font-size: 14px;
  color: #7f7f7f;

  .flexwrap {
    display: flex;
    flex-direction: row;
  }
  .info {
    justify-content: space-between;
    .bar {
      width: 8px;
      height: 13px;
      background: #e6e0fc;
      margin-right: 5px;
      border-radius: 2px;
      border: 1px solid #e6e0fc;
      margin-left: 30px;
    }
    .bargray {
      background: #fff;
      border-color: #bbb;
    }
  }
  .swichselect {
    padding: 15px 0;
    .selectInfo {
      margin-right: 50px;
      font-size: 14px;
      color: #7f7f7f;
    }
  }
  .dateBox {
    border: 1px solid #ccc;
    color: #666;
    ul {
      border-top: 1px solid #ccc;
      width: 100%;
      line-height: 40px;
      text-align: center;
      height: 40px;
      
      .nodate{
        background: #f4f1f1;
      }
      .selectedDate {
        background: #e6e0fc;
      }
      .noselete {
        background: #fff;
      }
      li{
          flex-grow: 1;
          width:14.28%;
          border-left: 1px solid #ccc;
      }
    }
    ul::last-child {
      border-top: 0;
    }

    .week > li:first-child {
      border-left: 0;
    }
    .datebtn {
      width: 100%;
      button {
        flex-grow: 1;
        background: #fff;
        line-height: 30px;
        border: none;
      }
      .premonth {
        text-align: left;
        cursor: pointer;
      }

      .nextmonth {
        text-align: right;
        cursor: pointer;
      }
    }
  }
}
</style>
<script>
import { abc } from "../../../js/abc.js";
import { potUrl } from "../../../js/config_url.js";
let d = 1;
export default {
  props:['y','m'],
  data() {
    return {
      week: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
      tabitem: { date: "", selected: "nodate", wantdate: "" },     
      radio: "1",
      newtab:[],
      showdateBtn:'',
    };
  },
   mounted(){  
        this.changedate()
    },
    watch:{
        radio(n,o){
            let that = this;
            let a = '',returnFarr=[];    
            that.newtab.map((outitem,i)=>{
                outitem.map((item,o)=>{
                    if(item.date != ''){
                        n=='1'?a = 'selectedDate': a = 'noselete'  ;
                        if(n == '1'){
                            returnFarr.push(item.wantdate)
                        }
                    }else{
                        a = 'nodate'
                    }                    
                    item.selected = a
                })
            })
            let str_arr = returnFarr.join(',')
            that.$emit('getDateArr',str_arr) 
        },
        m(n,o){
          this.m = n;
          this.changedate()
        }
    },
  methods: {
    changedate() {
        let that = this,m = that.m;
        m = parseInt(m); 
        that.showdateBtn = (that.y + "年" + that.m);
        that.newtab = [];
        var endDate = new Date(that.y, m, d);
        var nullNum = new Date(that.y, m - 1, d).getDay();
        var str_arr = [];
        //上个月最后一天
        endDate.setDate(0);
        var lastDate = endDate.getDate();
        var tab = [];
        for (var i = 0; i < nullNum; i++) {
            tab.push(that.tabitem);
        }
        for (var i = 0; i < lastDate; i++) {
            var item = {
            date: i + 1,
            selected: 'selectedDate',
            wantdate: that.y + "-" + m + "-" + (i + 1)
            };
            str_arr.push(item.wantdate)
            tab.push(item);
        }

        that.$emit('getDateArr',str_arr.join(',')) 
        var a = [];
        tab.map(function(item, i) {
            if (i % 7 == 0 && i != 0) {
            that.newtab.push(a);
            a = [];
            }
            a.push(item);
            if (i == tab.length - 1) {
                if (a.length != 7) {
                    let len = 7 - a.length;
                    for (var l = 0; l < len; l++) {
                    a.push(that.tabitem);
                    }
                }
                that.newtab.push(a);
                if (that.newtab.length < 6) {
                    var addNull = 6 - that.newtab.length,
                    addNullArr = [];
                    for (var d = 0; d < addNull; d++) {
                        for (var s = 0; s < 7; s++) {
                            addNullArr.push(that.tabitem);
                        }
                        that.newtab.push(addNullArr);
                    }
                }

            }
        });
    },
    preMonth(){
        //上一个月
        let that = this;
        that.m--;
		if(that.m<=0){
			that.m=12;
			that.y--
		}
		this.changedate()
    },
    nextMonth(){
        //下一个月
        let that = this;
        that.m++;
		if(that.m>12){
			that.m=1;
			that.y++
		}
		this.changedate()
    },
    ifselected(i,s){
        //是否选中
        let that = this;
        if(that.newtab[i][s].selected != 'nodate'){
            if(that.newtab[i][s].selected == 'selectedDate'){
               that.newtab[i][s].selected='noselete' 
            }else{
                that.newtab[i][s].selected='selectedDate'
            }
        }
        that.toParents()
        
    },
    toParents(){
      let that = this,returnFarr=[];   
      that.newtab.map((outitem,i)=>{
          outitem.map((item,o)=>{
              if(item.selected == 'selectedDate'){
                returnFarr.push(item.wantdate)                  
              }  
          })
      })
      let str_arr = returnFarr.join(',')
      that.$emit('getDateArr',str_arr) 
    }
  }
};
</script>